<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>mycart</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"-->
    <!--          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <link rel="stylesheet" th:href="@{/bootstrap.min.css}" />
    <script th:src="@{/vue.js}"></script>
</head>
<body>

<div th:insert="publicHeader"/>
<script th:src="@{/publicHeader.js}"></script>



<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container col-md-12" v-if="cartItemList.length<1" >
        <h3 style="text-align: center">还没有任何加购,快去购买吧~</h3>
    </div>

    <div class="container" v-if="cartItemList.length>0">
        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <tr>
                        <th>
                            <input type="checkbox" id="cartCheck" @click="selectAllItems" />
                        </th>
                        <th>商品名称</th>
                        <th>商品图片</th>
                        <th>商品单价(元)</th>
                        <th>购买数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="cartItem in cartItemList">
                        <td>
                            <input type="checkbox" name="cartItemCheck" @click="selectItem" :value="cartItem.productId"/>
                        </td>
                        <td v-text="cartItem.productName" style="height:60px;line-height: 60px">商品名称</td>
                        <td>
                            <img :src="cartItem.productImgsrc" style="width: 60px;height: 60px; border-radius: 50%"/>
                        </td>
                        <td  v-text="cartItem.productPrice" style="height:60px;line-height: 60px">商品单价</td>
                        <td style="height:60px;line-height: 60px">
                            <a  class="btn btn-default btn-sm" @click="updatebuycount(cartItem.productId,-1)">一</a>
                            &nbsp;<span v-text="cartItem.buycount" >5</span>&nbsp;
                            <a  class="btn btn-default btn-sm" @click="updatebuycount(cartItem.productId,1)">十</a>
                        </td>
                        <td v-text="cartItem.sumprice" style="height:60px;line-height: 60px">商品小计</td>
                        <td style="height:60px;line-height: 60px">
                            <a class="btn btn-danger" @click="updatebuycount(cartItem.productId,0)">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <b> 总价(元): {{totalPrice}} </b>
            </div>

            <div class="col-md-6">
                <button class="btn btn-success" @click="toOrderPreview">结算</button>
            </div>
        </div>

    </div>


</div>

<script>

    console.log(".........mycart...........")

    new Vue({
        el: "#app"
        ,
        data: {

            cartItemList:[]
            ,
            totalPrice:'0.00'
        }
        ,
        methods: {
            //获取购物车详情信息
            initMycartItems(){
                let vueObj = this;
                $.get("/cart/all",function (data) {
                    console.log(data);

                    vueObj.cartItemList=data;

                })
            }
            ,
            updatebuycount(productId,changeNum){
                let params={
                    productId:productId,
                    changeNum:changeNum
                }
                let objvue=this;
                $.post("/cart/updatebuycount",params,function (data) {
                    if (data=="ok"){
                        objvue.initMycartItems();
                        objvue.calculateTotalPrice();
                    }else{
                        alert(data)
                    }
                })
            }
            ,
            selectAllItems(){
                //获取 cartCheck 的选中状态
                let cartAllCheckFlag = $("#cartCheck").prop("checked");
                console.log(cartAllCheckFlag);

                //获取所有 cartCheck ,使设置他们的checked属性为cartAllCheckFlag
                let items = $("input[name='cartItemCheck']");
                items.each(function () {
                    //这里的this代表每一个item元素
                    $(this).prop("checked",cartAllCheckFlag);
                })
                this.calculateTotalPrice();
            }
            ,
            selectItem(){
                //初始标记
                let cartAllCheckFlag = true;

                //获取所有 cartItemCheck
                let items = $("input[name='cartItemCheck']");
                items.each(function () {
                    //但凡又一个item未选中就修改初始标记为false
                    if(!$(this).prop("checked")){
                        cartAllCheckFlag = false;
                    }
                })
                //根据初始标记修改cartCheck是否选中
                $("#cartCheck").prop("checked",cartAllCheckFlag);
                this.calculateTotalPrice();
            }
            ,
            calculateTotalPrice(){
                //搜集所有需要被选中的商品id
                let items = $("input[name='cartItemCheck']");
                let productIdArray=[];
                items.each(function () {
                    //如果当前cartItemCheck被选中,则收集其对应的商品id
                    if($(this).prop("checked")){
                        let productId = $(this).val();
                        console.log(productId)
                        productIdArray.push(productId)
                    }
                })

                console.log(productIdArray)

                if (productIdArray.length<1){
                    console.log("没有选中任何商品,无需计算总价")
                    this.totalPrice="0.00"
                    return;
                }


                //请求后台计算总价,更新totalPrice
                console.log("请求后台计算总价")
                // this.totalPrice="88.88";
                // 计算总价
                let vueObj = this;
                $.post("/cart/calculateTotalPrice",{productIds:productIdArray},function (data) {
                    vueObj.totalPrice=data;
                })
            }
            ,
            toOrderPreview(){
                //搜集所有需要被选中的商品id
                let items = $("input[name='cartItemCheck']");
                let productIdArray=[];
                items.each(function () {
                    //如果当前cartItemCheck被选中,则收集其对应的商品id
                    if($(this).prop("checked")){
                        let productId = $(this).val();
                        console.log(productId)
                        productIdArray.push(productId)
                    }
                })

                console.log(productIdArray)

                if (productIdArray.length<1){
                    alert("至少选中一件商品才能去结算")
                    return;
                }

                //带着要结算的商品id去结算页
                location.href="/cart/toOrderPreview?productIds="+productIdArray;

            }
        }
        ,
        created(){
            this.initMycartItems();
        }

    });


</script>


<div th:insert="publicFooter"/>
<script th:src="@{/publicFooter.js}"></script>


</body>
</html>